<template>
  <div>
    <div class="wrapper" @mouseenter="hover=true" @mouseleave="hover=false">
      <div class="link" v-show="hover">
        <ul class="group">
          <router-link to="/my-charts/line">line</router-link>
          <router-link to="/my-charts/demo">demo</router-link>
          <router-link to="/my-charts/d3">d3</router-link>
          <router-link to="/my-charts/rodar">line</router-link>
        </ul>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hover: false
    };
  }
};
</script>

<style lang="less" scoped>
.wrapper {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #38f;
  color: #fff;
  .link {
    position: absolute;
    left: 0;
    bottom: 80%;
    .group {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>